<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="conterner">
      <div class="left">
        <div class="a">校园风光</div>
        <div class="b">2</div>
      </div>
      <div class="right">
        <div class="c">3</div>
        <div class="d">学术研究</div>
        <div class="e">
          <img src="1.jpg" alt="" width="200px" height="250px" />
        </div>
        <div class="f">学术活动</div>
        <div class="g">7</div>
        <div class="h">8</div>
      </div>
    </div>
  </body>

  <style>
    .conterner {
      width: 800px;
      height: 400px;
      background-color: aliceblue;
      margin: auto;
    }
    .left {
      width: 200px;
      height: 400px;
      background-color: aqua;
      float: left;
    }
    .right {
      width: 600px;
      height: 400px;
      background-color: blue;
      float: left;
    }
    .a {
      width: 200px;
      height: 240px;
      box-sizing: border-box;
      background: pink;
      float: left;
      font-weight: 800;
      font-size: 40px;
      padding-top: 60px;
      padding-left: 20px;
      box-sizing: border-box;
    }
    .b {
      width: 200px;
      height: 160px;
      box-sizing: border-box;
      background: red;
      float: left;
      background-image: url(https://www.pdsu.edu.cn/images/fgt12.jpg);
    }
    .c {
      width: 300px;
      height: 250px;
      box-sizing: border-box;
      background: rgb(204, 255, 0);
      float: left;

      background-image: url(https://www.pdsu.edu.cn/images/fgt11.jpg);
    }
    .d {
      width: 100px;
      height: 250px;
      box-sizing: border-box;
      background: rgb(0, 60, 255);
      float: left;
      font-weight: 800;
      font-size: 25px;
      padding-top: 80px;
      padding-left: 30px;
      box-sizing: border-box;
      writing-mode: vertical-lr;
    }
    .e {
      width: 200px;
      height: 250px;
      box-sizing: border-box;
      background: rgb(192, 255, 231);
      float: left;
    }
    .f {
      width: 200px;
      height: 150px;
      box-sizing: border-box;
      background: rgb(0, 195, 255);
      float: left;
      font-weight: 800;
      font-size: 25px;
      padding-top: 60px;
      padding-left: 50px;
      box-sizing: border-box;
    }
    .g {
      width: 200px;
      height: 150px;
      box-sizing: border-box;
      background: rgb(255, 0, 230);
      float: left;
      background-image: url(https://www.pdsu.edu.cn/images/fgt14.jpg);
    }
    .h {
      width: 200px;
      height: 150px;
      box-sizing: border-box;
      background: rgb(183, 255, 0);
      float: left;
      background-image: url(https://www.pdsu.edu.cn/images/fgt13.jpg);
    }
  </style>
</html>
